<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="./js/vue.js"></script>
    <script src="./js/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        table, tr, td, th {
            border: 1px solid #000;
        }

        table {
            width: 100%;
        }

    </style>
</head>

<body>
<div id="app">
    <table>
        <tr>
            <th>序号</th>
            <th>茶叶名称</th>
            <th>茶叶类别</th>
            <th>排序</th>
            <th>茶叶介绍</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        <tr v-for="(tea,i) in teas" align="center">
            <td>{{i + 1}}</td>
            <td>{{tea.teaName}}</td>
            <td>{{tea.teaTypeId}}</td>
            <td>{{tea.ordered}}</td>
            <td>{{tea.description}}</td>
            <td>{{tea.status}}</td>
            <td>
                <button>修改</button>
                <button>删除</button>
            </td>
        </tr>
    </table>

</div>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            //创建一个茶叶对象的列表
            teas: []
        },
        mounted(){//是vue挂载完成后加载的
            //创建一个变量，存vue对象
            var _this=this;
            //页面加载完成后，才要发送异步请求，查询所有信息
            axios({
                method:"get",
                url:"/teas"
            }).then(function (resp) {//回调函数，发送请求后，获取后端的响应内容
                _this.teas=resp.data;
            })
        }

    })
</script>
</body>
</html>